import React from 'react';
import { Table } from 'antd';
import { Pagination } from '@/components';
import styles from './index.less';

export default props => {
    const { dataSource: receivedSource } = props;
    const dataSource = receivedSource.map((item, index) => ({ ...item, scoreIndex: index + 1 }));
    const [pagination, setPagination] = React.useState({ pageSize: 10, current: 1 });
    const [dataSourceToShow, setDataSourceToShow] = React.useState([]);

    const onPaginationChange = newPagination => {
        setDataSourceToShow([]);
        setPagination({
            ...pagination,
            ...newPagination
        });
    };

    React.useEffect(() => {
        const start = (pagination.current - 1) * pagination.pageSize;
        const end = start + pagination.pageSize;
        setDataSourceToShow(dataSource.slice(start, end));
    }, [pagination]);

    const showEllipsisText = (text, width = '100%') => (
        <div style={{ width }} title={text}>
            <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{text}</div>
        </div>
    );

    const columns = [
        { key: 'scoreIndex', dataIndex: 'scoreIndex', title: '序号', width: 50 },
        { key: 'taskNo', dataIndex: 'taskNo', title: '任务编号', width: 100 },
        {
            key: 'taskName',
            dataIndex: 'taskName',
            title: '名称',
            width: 300,
            render: text => showEllipsisText(text, '280px')
        },
        { key: 'taskExecutor', dataIndex: 'taskExecutor', title: '执行人', width: 100 },
        {
            key: 'executorDepartmentName',
            dataIndex: 'executorDepartmentName',
            title: '执行部门',
            render: text => showEllipsisText(text, '130px')
        }
    ];
    return (
        <div className={styles.scoreTable}>
            <Table dataSource={dataSourceToShow} rowKey="id" columns={columns} pagination={false} scroll={{ x: 550 }} />
            <Pagination
                total={dataSource.length}
                {...pagination}
                onChange={onPaginationChange}
                style={{ marginBottom: 0 }}
            ></Pagination>
        </div>
    );
};
